<template>
	<view>
		<navbar title="消息通知" :isbg="false" :autoBack="true" :opacity='1'>
			<view class="add" slot='rightbtn' @click="navto('/pages/datagl/addrmsg')">
				添加
			</view>
		</navbar>
		<u-sticky bgColor="#F8F8F8">
			<view class="tab">
				<u-tabs :list="list4" lineWidth="35rpx" lineHeight='8rpx' lineColor="#2A51FA" :activeStyle="{
				            color: '#1E1E1E',
				            fontWeight: 'bold',
				            transform: 'scale(1.2)'
				        }" :inactiveStyle="{
				            color: '#6D6D6D',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 38rpx; padding-right: 38rpx; height: 60rpx;" @click="click">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="con">
			<view class="box" v-if="list.length>0">
				<view class="box__item" v-for="(item,index) in list" :key="index">
					<image src="/static/data/tz.png" class="box__item__icon" mode=""></image>
					<view class="box__item__right">
						<view class="box__item__name">
							{{item.title}}
						</view>
						<view class="box__item__time">
							<view class="">
								交易日期:{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}
							</view>
							<view class="">
								已读
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty mode="message" v-else>
			</u-empty>
			<view class="loadmore">
				~暂无更多~
			</view>
		</view>
	</view>
</template>

<script>
	import datagl from '@/api/_datagl.js'
	export default {
		data() {
			return {
				list4: [],
				list: []
			};
		},
		methods: {
			click(e) {
				console.log(e)
				this.getlist(e.name)
			},
			async gettype() {

				let res = await datagl.readConfig({
					configName: 'msgtype'
				})
				if (res.data.code == 1) {
					let arr = res.data.data.msgtype
					arr.map(t => {
						this.list4.push({
							name: t
						})
					})
					this.getlist(this.list4[0].name)
				}
			},
			async getlist(type) {
				let res = await datagl.getNotifyList({
					type
				})
				if (res.data.code == 1) {
					this.list = res.data.data
				}
			}
		},
		onLoad() {
			this.gettype()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.add {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #2A51FA;
		line-height: 30rpx;
	}

	.tab {
		height: 99rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}

	.con {
		padding: 0 30rpx 30rpx;

		.box {
			padding-left: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			&__item {
				display: flex;
				align-items: center;
				padding-right: 30rpx;

				&__icon {
					width: 79rpx;
					height: 79rpx;
				}

				&__right {
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					padding-left: 20rpx;
					border-bottom: 2rpx solid #F9F9F9;
				}

				&__name {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #010101;
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				&__time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #6D6D6D;
					line-height: 24rpx;
				}

				.wd {
					color: #2A51FA;
				}
			}
		}
	}

	.loadmore {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #6D6D6D;
		line-height: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}
</style>